<template>
<div style="background-color: white">
  <div style="height: 40px">

  </div>



<div>
  <el-table
      :data="tableData"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
  >
<!--    <el-table-column prop="date" label="日期" sortable width="180">-->
<!--    </el-table-column>-->
    <el-table-column prop="id" width="55" label="编号" v-if="show" type="index" />
<!--    <el-table-column prop="vehiclePyId" width="55" label="编号"  />-->
    <el-table-column prop="processId" label="流程编号" show-overflow-tooltip/>
    <el-table-column prop="empName" label="申请人" />
    <el-table-column prop="deptName" label="申请部门" />
    <el-table-column prop="brand" label="车辆名称" />
    <el-table-column prop="licensePlate" label="车牌号" />
    <el-table-column prop="status" label="状态" >
      <template #default="scope">
        <i class="el-icon-time"></i>
        <!--                <span>{{ scope.row.status }}</span>-->
        <template v-if="scope.row.status === 1">
          <el-tag type="danger">待使用</el-tag>
        </template>
        <template v-if="scope.row.status ===3">
          <el-tag type="success">使用中</el-tag>
        </template>
        <template v-if="scope.row.status ===4">
          <el-tag type="warning">已归还</el-tag>
        </template>
      </template>
    </el-table-column>
    <el-table-column  label="人数" >
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span>{{ scope.row.type }}</span>人/坐
      </template>
    </el-table-column>
    <el-table-column label="价值" >
      <template #default="scope">
      <i class="el-icon-time"></i>
      <span>{{ scope.row.worth }}</span>  万元
        </template>
    </el-table-column>
    <el-table-column prop="createTime" label="申请时间" show-overflow-tooltip/>
    <el-table-column prop="kaishiTime" label="开始时间" show-overflow-tooltip/>
    <el-table-column prop="jieshuTime" label="归还时间" show-overflow-tooltip/>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <template v-if="scope.row.status ===3 || scope.row.status ===4">
          <el-button size="mini" @click="handleEdit_1(scope.row,3)" type="primary" plain disabled>使用</el-button>
        </template>
        <template v-if="scope.row.status ===1 ">
          <el-button size="mini" @click="handleEdit_1(scope.row,3)" type="primary" plain >使用</el-button>
        </template>





        <template v-if="scope.row.status ===3">
          <el-button size="mini" @click="handleEdit_2( scope.row,4,0)" type="success" plain>归还</el-button>
        </template>
        <template v-if="scope.row.status ===1">
          <el-button size="mini" @click="handleEdit_2( scope.row,4,0)" type="success" plain>归还</el-button>
        </template>
        <template v-if="scope.row.status ===4">
          <el-button size="mini" @click="handleEdit_2( scope.row,4,0)" type="success" plain disabled>归还</el-button>
        </template>
<!--        <template v-if="scope.row.status !==1">-->
<!--          <el-button size="mini" @click="handleEdit_2( scope.row,4)" type="success" plain disabled>归还</el-button>-->
<!--        </template>-->


      </template>
    </el-table-column>
  </el-table>
</div>


</div>
</template>

<script>
import {
  selectMyvheicle,
  updateStatus,
  updatevehicle,
  updateVehicleRecord
} from "../../../network/adm/vehicle";

export default {
  data() {
    return {
      show:true,
      tableData: [],
    }
  },
  methods: {
    //手动调节表格排序
    formatter(row, column) {
      // console.log(row)
      // return row.address
    },
    //获取已通过审批的车辆信息
    selectAll(){
      let params={
        empName:this.$store.state.loginUser.empName
      }
      selectMyvheicle(params).then(data=>{
        console.log("通过的信息",data)
        this.tableData=data.data
      })
    },
    //添加归还时间
    handleEdit_1(row,type){
      console.log("选中当前行row的值",row)
      console.log("当前值",type)
      updateVehicleRecord({
        kaishiTime:new Date().format("yyyy-MM-dd hh:mm:ss"),
        id:row.id
      }).then(data=>{
        this.selectAll()
      })
      //修改当前状态
      updateStatus({
        status:type,
        id:row.vehiclePyId
      }).then(data=>{
        this.$response.handle({
          data:data,
          success:"您正在使用车辆，请注意拿全",
          error:"失败",
          successFn:()=>{
            this.selectAll()
          }
        })
      });
    },
    //添加结束时间
    handleEdit_2(row,type,type_2){
      updateVehicleRecord({
        jieshuTime:new Date().format("yyyy-MM-dd hh:mm:ss"),
        id:row.id
      }).then(data=>{
        this.selectAll()
      })
      //修改当前状态
      updateStatus({
        status:type,
        id:row.vehiclePyId
      }).then(data=>{
        this.$response.handle({
          data:data,
          success:"您已将车辆归还，您辛苦了",
          error:"失败",
          successFn:()=>{
            this.selectAll()
          }
        })
      })

      updatevehicle({
        enabled:type_2,
        id:row.vehicleId
      }).then(data=>{

      })



    },




  },
  created() {
    this.selectAll();
  }
}
</script>

<style scoped>

</style>